<template>
  <el-card class="question-card cursor-pointer" shadow="hover" body-style="{padding: '16px 18px 12px 18px'}"
    @click="goDetail">
    <slot :question="question">
      <div class="flex justify-between items-start">
        <div class="flex-1 min-w-0">
          <div class="mb-1 flex gap-1 flex-wrap justify-between">
            <div class="mb-1 flex gap-1 flex-wrap">
              <!-- 置顶标识 -->
              <div v-if="question.isTop == 1 && activeTab == 'recommend'" class="top-badge">
                <el-icon class="top-icon">
                  <ArrowUp />
                </el-icon>
                <span>置顶</span>
              </div>
              <div class="flex items-center gap-2">
                <el-tag v-for="(tag, index) in question.specialtyTagNames" :key="index"
                  :type="tagTypes[index % tagTypes.length]" size="small" class="tag-modern">
                  {{ tag }}
                </el-tag>
              </div>
            </div>
            <div class="flex flex-col gap-1 ml-3 items-end" v-if="question.status != 1">
              <el-button size="small" type="primary" round class="answer-btn">写回答</el-button>
            </div>
          </div>
          <div class="question-title mb-1">{{ question.title }}</div>
          <div class="question-content mb-2" v-html="question.content"></div>
          <div class="flex items-center justify-between">
            <div v-if="question.username" class="flex items-center gap-1">
              <img :src="question.avatar || defaultAvatar"
                class="w-6 h-6 rounded-full object-cover border border-blue-100 shadow-sm cursor-pointer" />
              <span class=" text-xs font-medium text-blue-700 cursor-pointer">
                {{ question.username }}
              </span>
            </div>
            <div class="question-meta mb-1">
              <span>{{ question.viewCount }} 浏览</span>
              <span>· {{ question.answerCount }} 回答</span>
              <span>· {{ question.likeCount }} 点赞</span>
              <span>· {{ formatTime(question.createTime) }}</span>
            </div>
          </div>
        </div>
      </div>
    </slot>
  </el-card>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { ArrowUp } from '@element-plus/icons-vue'
import { formatTime } from '@/utils/transIUtils'

const props = defineProps({
  question: {
    type: Object,
    required: true
  },
  activeTab: {
    type: String,
    required: true
  }
})

const router = useRouter()
const defaultAvatar = ref('/src/assets/avatar.png')

// 标签类型数组
const tagTypes = [
  'primary',   // 蓝色
  'success',   // 绿色
  'warning',   // 橙色
  'danger',    // 红色
  'info'       // 紫色
]

// 格式化时间
// function formatTime(time) {
//   if (!time) return ''
//   const date = new Date(time)
//   return date.toLocaleDateString('zh-CN', {
//     year: 'numeric',
//     month: '2-digit',
//     day: '2-digit',
//     hour: '2-digit',
//     minute: '2-digit'
//   })
// }

// 保存页面状态
function savePageState() {
  const scrollPosition = window.scrollY
  const currentState = {
    scrollPosition,
    activeTab: props.activeTab,
    timestamp: Date.now()
  }
  sessionStorage.setItem('questionListState', JSON.stringify(currentState))
}

//跳转打开新页签
function goDetail() {
  savePageState()
  router.push({
    path: `/question/${props.question.id}`,
    query: {
      tab: props.activeTab,
      from: 'list'  // 添加来源标记
    }
  })
}
</script>

<style scoped>
.question-card {
  border-radius: 13px;
  border: none;
  box-shadow: 0 2px 10px 0 rgba(56, 112, 255, 0.08);
  margin-bottom: 16px;
  transition: box-shadow 0.18s, transform 0.14s;
  background: #fafdff;
  padding: 0;
}

.question-card:hover {
  box-shadow: 0 8px 28px 0 rgba(56, 112, 255, 0.16);
  transform: translateY(-2px) scale(1.018);
  background: #f4f8ff;
}

.question-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a237e;
  line-height: 1.32;
  cursor: pointer;
  transition: color 0.16s, transform 0.16s;
  word-break: break-all;
}

.question-card:hover .question-title {
  color: #2563eb;
  text-decoration: underline;
  /* transform: scale(1.03); */
}

.question-content {
  color: #4b5563;
  /* font-size: 13px; */
  line-height: 1.6;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: calc(1.6em * 2);
  /* 2行文字的高度 */
}

.question-content :deep(p) {
  margin: 0;
  padding: 0;
  display: inline;
}

.question-content :deep(img),
.question-content :deep(video),
.question-content :deep(iframe) {
  display: none;
  /* 隐藏富文本中的媒体内容 */
}

.question-meta {
  color: #8a99b3;
  font-size: 12px;
  gap: 10px;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.tag-modern {
  font-weight: 500;
  color: #333;
  border: 1px solid #e4e7ed;
  background: #f8f9fa;
  transition: all 0.3s ease;
  margin-right: 4px;
}

.tag-modern:hover {
  background: #e9ecef;
  border-color: #dee2e6;
}

/* 不同标签类型的颜色 */
:deep(.el-tag.el-tag--primary) {
  background: #e3f2fd;
  border-color: #2196f3;
  color: #1976d2;
}

:deep(.el-tag.el-tag--success) {
  background: #e8f5e8;
  border-color: #4caf50;
  color: #2e7d32;
}

:deep(.el-tag.el-tag--warning) {
  background: #fff3e0;
  border-color: #ff9800;
  color: #f57c00;
}

:deep(.el-tag.el-tag--danger) {
  background: #ffebee;
  border-color: #f44336;
  color: #d32f2f;
}

:deep(.el-tag.el-tag--info) {
  background: #f3e5f5;
  border-color: #9c27b0;
  color: #7b1fa2;
}

.answer-btn {
  background: linear-gradient(90deg, #2563eb 0%, #60a5fa 100%) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 500;
  box-shadow: 0 1px 6px 0 rgba(64, 158, 255, 0.08);
  width: 64px;
  transition: background 0.16s, box-shadow 0.16s, transform 0.16s;
  border-radius: 999px !important;
  font-size: 13px !important;
  padding: 0 10px !important;
}

.answer-btn:hover {
  background: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 100%) !important;
  box-shadow: 0 2px 10px 0 rgba(64, 158, 255, 0.13);
  transform: scale(1.06);
}

/* 置顶标识样式 */
.top-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
  animation: topPulse 2s infinite;
  position: relative;
  overflow: hidden;
}

.top-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: topShine 3s infinite;
}

.top-icon {
  font-size: 10px;
  animation: topBounce 1.5s infinite;
}

@keyframes topPulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4);
  }
}

@keyframes topShine {
  0% {
    left: -100%;
  }

  50% {
    left: 100%;
  }

  100% {
    left: 100%;
  }
}

@keyframes topBounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-2px);
  }

  60% {
    transform: translateY(-1px);
  }
}

/* .username-hover {
  transition: color 0.16s, text-decoration 0.16s;
  cursor: pointer;
}
.username-hover:hover {
  color: #ff9800;
  text-decoration: underline;
} */
@media (max-width: 700px) {
  .question-card {
    padding: 0 !important;
  }

  .question-title {
    font-size: 14px;
  }

  .question-content {
    font-size: 11px;
  }

  .question-meta {
    font-size: 10px;
    gap: 6px;
  }

  .tag-modern {
    font-size: 9px !important;
    padding: 0 4px !important;
    height: 16px !important;
    line-height: 16px !important;
  }

  .answer-btn {
    font-size: 11px !important;
    width: 48px;
    padding: 0 6px !important;
  }

  .username-hover {
    font-size: 11px;
  }

  img {
    width: 18px !important;
    height: 18px !important;
  }

  .top-badge {
    font-size: 10px;
    padding: 3px 6px;
    gap: 2px;
  }

  .top-icon {
    font-size: 9px;
  }
}
</style>